<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../static/layui-v2.6.8/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>实例调用</legend>
</fieldset>
<div class="layui-btn-container">
  <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
  <button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
</div>
<div id="test7" class="demo-transfer demo-tree-more">
</div>
 





          
<script src="../../../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['transfer', 'layer', 'util','tree'], function(){
  var $ = layui.$
  ,transfer = layui.transfer
  ,layer = layui.layer
  ,util = layui.util
  ,tree = layui.tree;
  
  //模拟数据
  var data1 = [
    {"value": "1", "title": "李白"}
    ,{"value": "2", "title": "杜甫"}
    ,{"value": "3", "title": "苏轼"}

  ]
 
  
  //穿梭框开始
  //实例调用
  transfer.render({
    elem: '#test7'
    ,data: data1
    ,id: 'key123' //定义唯一索引
    ,title: ['员工列表', '参会人员']
    ,showSearch: true
  })
  //批量绑定事件
  util.event('lay-demoTransferActive', {
    getData: function(othis){

      var getData = transfer.getData('key123'); //获取右侧数据
      console.log('执行了')
      layui.$.ajax({
        data: JSON.stringify(getData),
        url : 'transferdata',
        type: 'post',
        dataType : 'json',
        contentType : 'application/json',
        success :function(data){
          if (data.code == 200){
            console.log('添加成功')
          }
          
        }
      })
      
    }
  });
  //穿梭框结束
  //树型结构开始
  //树型结构结束
});

</script>

</body>
</html>